import React, { Component } from 'react';

import '../../styles/class/GoodsClass.scss'
import { category_list, category_subcate } from '../../api/index'

import { withRouter } from 'react-router-dom';

class GoodsClass extends Component {
    constructor(props) {
        super(props);
        //初始化组件状态(数据)
        this.state = {
            obj: { title: 'vue react' },
            list: [],//一级分类
            subcate: {}, //二三级分类
            currentIndex: 0,//用来保存导航按钮的下标
        }
    }
    handleClick(index, e, id) {
        this.setState({
            currentIndex: index
        }, () => {
            console.log(this.state.currentIndex);
        })
        //接收点击的一级分类id, 请求对应的二三级分类
        category_subcate({ id }).then((res) => {
            console.log(res.data.subcate);
            this.setState({
                subcate: res.data.subcate
            })
        })
    }
    componentDidMount() {
        console.log('componentDidMount');
        //请求一级分类
        category_list().then((res) => {
            this.setState({
                list: res.data.list
            })
            console.log(res.data.list);
            //请求第一个一级分类对应的二三级分类
            category_subcate({ id: res.data.list[0].id }).then((res) => {
                this.setState({
                    subcate: res.data.subcate
                })
                console.log(res.data.subcate);
                console.log(res.data.subcate.subcategory);
            })
        })
    }
    toClassifySearch(id, name) {
        console.log('去分类搜索页面');
        console.log('ID', id);
        console.log('name', name);
        // this.props.history.push('/classifySearch/' + id);
        this.props.history.push({ pathname:'/classifySearch',state:{ id:id,name:name } });//跳路由传参
    }
    render() {
        return (
            <div className='GoodsClass'>
                {/* 一级分类 */}
                <div className="left">
                    {
                        this.state.list.map((item, index) => {
                            return (
                                <div className='item' key={index}>
                                    <div className={`name  ${this.state.currentIndex === index ? 'active' : ''}`} onClick={(e) => { this.handleClick(index, e, item.id) }}> {item.name} </div>
                                </div>
                            )
                        })
                    }
                </div>

                {/* 二三级分类 */}
                <div className="right">
                    {/* 二级分类列表 */}
                    {
                        this.state.subcate.subcategory &&
                        this.state.subcate.subcategory.map((item2, index) => {
                            return (
                                <div className="box" key={index}>
                                    <h3 className='title' >{item2.name}</h3>
                                    {/* 三级分类列表 */}
                                    <div className="list">
                                        {
                                            item2.subNavs.map((item3, index) => {
                                                return (
                                                    <div className="cate" key={index} onClick={() => { this.toClassifySearch(item3.id, item3.name) }}>
                                                        <img src={item3.pic} alt="" />
                                                        <div className="name">{item3.name}</div>
                                                    </div>
                                                )
                                            })
                                        }
                                    </div>
                                </div>
                            )
                        })
                    }
                </div>
            </div>
        );
    }
}

export default withRouter(GoodsClass);